<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 001</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
    <div id="myApp">
        <h1>{{ h1_text_content }}</h1>

        <span :title="span_title">
          鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>

        <p v-if="seen">现在你看到我了</p>
        <p v-show="seen">这是v-show的内容</p>

        <ol>
            <zhujian_aaa v-for="item in groceryList"  :todo="item" :aaa="item.id"></zhujian_aaa>
        </ol>

        <button @click="addOneLi">增加一行</button>
        <button @click="removeLastLi">删除最后一行</button>

        
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">反转消息</button>
        <button @click="reverseMessage">反转消息@</button>

        
        <p>{{ input_content }}</p>
        <input v-model="input_content">
    </div>
</body>
<script>
    // 定义名为 zhujian-aaa 的新组件
    Vue.component('zhujian_aaa', {
        props: ['todo','aaa'],
        template: '<li>ID 是{{aaa}},名字是 {{ todo.text }}</li>'
    })


    var app = new Vue(    
        {
            el: '#myApp',
            data: {
                h1_text_content: '这是H1的文本内容sasfsa',
                span_title: '页面加载于 ' + new Date().toLocaleString(),
                seen: false,
                todos: [
                    { text: '学习 JavaScript' },
                    { text: '学习 Vue' },
                    { text: '整个牛项目' }
                ],
                groceryList:[
                    { id: 4, text: '蔬菜' },
                    { id: 5, text: '奶酪' },
                    { id: 6, text: '随便其它什么人吃的东西' }
                ],
                message: '这是要反转的内容',
                input_content: 'Hello Vue!'
            },
            methods:{
                addOneLi:function(){
                    this.todos.push({text:"这是增加的一行"});
                },
                removeLastLi:function(){
                    this.todos.pop(1);
                },
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        }      
    )    
</script>
</html>